<!-- Created by duwanfu on 2018/10/24 -->
<template>
    <div class="wraper">
      <div class="content">
        <div class="title">
          <span class="content-title">热门银行</span>
        </div>
        <div class="bank-list">
          <div
            v-for="(item, i) in cardList"
            @click="toLink(item.bankId)"
            :key="i">
            <img :src="item.logoUrl" alt="">
            <p>{{item.shortBankName}}</p>
            <p>{{item.bankRemark}}</p>
          </div>
        </div>
      </div>

      <div class="content">
        <div class="title">
          <span class="content-title">热门推荐</span>
        </div>
        <div class="recommend-list">
          <div v-for="(item, i) in creditList" :key="i" class="recommend-content clearfix">
            <div class="recommend-img fl">
              <img :src="item.bannerUrl" alt="">
            </div>
            <div class="recommend-detail fl">
              <p>{{item.creditName}}</p>
              <p>{{item.state}}</p>
              <p>{{item.applyNum}}人本月申请</p>
            </div>
            <div @click="toLink(item.bankId)" class="apply">立即申请</div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import { browserMixin, certificationMixin } from '../../assets/js/mixin'

  export default {
    name: "card",
    mixins: [browserMixin, certificationMixin],
    data() {
      return {
        msg: '',
        cardList: [],
        creditList: []
      }
    },
    mounted() {
      this.getAllBanks()
      this.getAllCredites()
    },
    methods: {
      toLink (bankId) {
        if (this._isAuthName) {
          let params = {
            bankid: bankId
          }
          this.$http.getBankOrCreditUrl(params).then(res => {
            console.log(res);
            let url = res.data
            location.href = url
          })
        } else {
          this.$router.push({path: '/apply'})
        }
      },
      getAllBanks () {
        let params = {
          status: 1,
          pageNum: 1,
          pageSize: 9,
          recommend: 1
        }
        this.$http.getAllBank(params).then(res => {
          console.log(res);
          if (res.code === '200') {
            this.cardList = res.data.rows
          }
        })
      },
      getAllCredites () {
        let params = {
          status: 1,
          pageNum: 1,
          pageSize: 9999,
          recommend: 1
        }
        this.$http.getAllCredit(params).then(res => {
          console.log(res);
          if (res.code === '200') {
            this.creditList = res.data.rows
          }
        })
      }
    }
  }</script>

<style lang="scss" scoped>
  .wraper {
    min-height: calc(100vh - 1rem);
    background-color: #f1f0ee;
    padding-bottom: 1rem;
    .content {
      width: 100%;
      box-sizing: border-box;
      background: #f8f8f4;
      padding: 0 .3rem;
      /*margin-top: .2rem;*/
      /*box-shadow: 0 0 10px rgba(0, 0, 0, .1);*/
      .title {
        font-size: .3rem;
        height: .6rem;
        line-height: .6rem;
        .content-title {
          padding-left: .2rem;
          font-weight: bold;
          background: url("../../assets/imgs/icon-title.png") no-repeat left center;
          background-size: .06rem .28rem;
        }
        .more {
          color: #666;
          padding-right: .25rem;
          background: url("../../assets/imgs/icon-right.png") no-repeat right .18rem;
          background-size: .19rem .26rem;
        }
      }
      /*热门办卡*/
      .bank-list {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: .25rem;
        margin-top: .2rem;
        div {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          flex: 1;
          height: 1.7rem;
          width: 33.33%;
          min-width: 33.33%;
          max-width: 33.33%;
          text-align: center;
          img {
            width: .9rem;
            height: .9rem;
            display: block;
          }
          p:nth-child(2) {
            display: block;
            margin-top: .1rem;
          }
          p:nth-child(3) {
            color: #999;
            font-size: .2rem;
            display: block;
            margin-top: .1rem;
          }
        }
      }
      /*热门推荐*/
      .recommend-content {
        position: relative;
        padding: .25rem 0;
        width: 100%;
        border-bottom: 1px solid #dfdfdf;
        .recommend-img {
          width: 2.2rem;
          height: 1.4rem;
          border-radius: .16rem;
          overflow: hidden;
          background: #dfdfdf;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .recommend-detail {
          font-size: .2rem;
          line-height: .3rem;
          color: #999999;
          margin-left: .2rem;
          p {
            padding-top: .1rem;
          }
          p:nth-child(1) {
            font-size: .26rem;
            color: #333333;
          }
        }
        .apply {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 1.44rem;
          height: .46rem;
          border: 1px solid #ff0000;
          color: #dd001b;
          text-align: center;
          line-height: .46rem;
          font-size: .24rem;
          border-radius: .08rem;
        }
      }
    }
  }
</style>
